<template>
  <div class="app-container">
    <side-menu class="side-menu"></side-menu>
    <div class="main-content">
      <router-view v-slot="{ Component }">
        <template v-if="$route.meta.keepAlive">
          <keep-alive include="ScriptSearch">
            <component :is="Component" />
          </keep-alive>
        </template>
        <template v-else>
          <component :is="Component" />
        </template>
      </router-view>
    </div>
  </div>
</template>

<script setup lang="ts">
import SideMenu from './components/SideMenu.vue'
</script>

<style>
.app-container {
  display: flex;
  min-height: 100vh;
  width: 100%;
  overflow-x: hidden;
}

.side-menu {
  flex-shrink: 0;
}

.main-content {
  flex-grow: 1;
  padding: 20px;
  overflow-y: auto;
  background-color: var(--el-bg-color);
}
</style>